<template>
    <div id="footer">
         {{[Hitokoto]}}<br>
        © 2021 • 懒回顾
    </div>
</template>

<script>
    import {ref} from 'vue';
    import axios from 'axios';
    export default {
        name: "footer",
        setup(){ //setup函数是组合API的入口函数
            const Hitokoto =ref('花褪残红青杏小。燕子飞时，绿水人家绕');
            console.log(Hitokoto);
            getHitokoto();
            function getHitokoto() {
                axios.get('https://v1.hitokoto.cn?encod=text')
                    .then(({ data }) => {
                        Hitokoto.value  = data.hitokoto;
                        console.log(Hitokoto.value);
                        //return Hitokoto.value;
                    })
                    .catch(console.error)
            }
            return {Hitokoto,getHitokoto}
        }
    }
</script>

<style scoped>
#footer{
    width: 100%;
    text-align: center;
    clear: both;
    padding: 15px 0;
    font-size: 15px;
    position:absolute;


}
</style>